<template>
  <div class="step_05">
    路由：
    <el-button @click="normal" size="mini" type="primary" plain>normal</el-button>
    <el-button @click="orth" size="mini" type="primary" plain>orth</el-button>
    <el-button @click="oneSide" size="mini" type="primary" plain>oneSide</el-button>
    <el-button @click="manhattan" size="mini" type="primary" plain>manhattan</el-button>
    <el-button @click="metro" size="mini" type="primary" plain>metro</el-button>
    <el-button @click="er" size="mini" type="primary" plain>er</el-button>
    链接器：
    <el-button @click="smooth" size="mini" type="primary" plain>smooth</el-button>
    <el-button @click="rounded" size="mini" type="primary" plain>rounded</el-button>
    <el-button @click="rounded" size="mini" type="primary" plain>jumpover</el-button>
    labels：
    <el-button @click="singleLabel" size="mini" type="primary" plain>单个标签</el-button>
    <el-button @click="doubleLabel" size="mini" type="primary" plain>双标签</el-button>
    <el-button @click="defaultLabel" size="mini" type="primary" plain>默认标签</el-button>
    <el-button @click="setLabel" size="mini" type="primary" plain>设置标签</el-button>
    <el-button @click="addLabel" size="mini" type="primary" plain>添加标签</el-button>
    定制线样式：
    <el-button @click="customPathStyle" size="mini" type="primary" plain>定制箭头样式</el-button>
    使用箭头：
    <a href="https://antv-x6.gitee.io/zh/docs/tutorial/intermediate/marker#block">使用箭头</a>
    公交图：
    <el-button @click="busMap" size="mini" type="primary" plain>公交图</el-button>


    <div id="container"></div>
  </div>
</template>
<script>
import { Graph, Shape, Node, ObjectExt } from "@antv/x6";
let rect0 = null;
let rect = null;
let edge = null;
export default {
  data() {
    return {
      graph: null,
      curCel: null,
      data: {
        nodes: [
          {
            id: "node1",
            x: 0,
            y: 50,
            width: 80,
            height: 40,
            attrs: {
              body: {
                fill: "blue",
              },
              label: {
                text: "Hello",
                fill: "white",
              },
            },
          },
          {
            id: "node2",
            x: 0,
            y: 400,
            width: 80,
            height: 40,
            attrs: {
              body: {
                fill: "blue",
              },
              label: {
                text: "Hello",
                fill: "white",
              },
            },
          },
        ]
      },
      defaultEdge: null,
    };
  },
  methods: {
    normal() {
      this.graph.addEdge({
        source: 'node1',
        target: 'node2',
        // 默认路由，由vertices决定点
        vertices: [
          { x: 100, y: 200 },
          { x: 300, y: 120 },
        ],
      })
    },
    orth() {
      this.graph.addEdge({
        source: 'node1',
        target: 'node2',
        vertices: [
          { x: 100, y: 200 },
          { x: 200, y: 220 },
        ],
        router: {
          name: 'orth',
          args: {
            padding: {
              left: 50,
            }
          }
        },
      })
    },
    oneSide() {
      this.graph.addEdge({
        source: 'node1',
        target: 'node2',
        // vertices: [
        //   { x: 100, y: 200 },
        //   { x: 200, y: 220 },
        // ],
        router: {
          name: 'oneSide',
          args: { side: 'right' },

        },
      })
    },
    manhattan() {
      this.graph.addEdge({
        source: 'node1',
        target: 'node2',
        vertices: [
          { x: 100, y: 200 },
          { x: 200, y: 300 },
        ],
        router: {
          name: 'manhattan',
          args: {
            // startDirections: ['top'],
            // endDirections: ['bottom'],
          },

        },
      })
    },
    metro() {
      this.graph.addEdge({
        source: 'node1',
        target: 'node2',
        vertices: [
          { x: 100, y: 200 },
          { x: 200, y: 300 },
        ],
        router: {
          name: 'metro',
          args: {
            startDirections: ['top'],
            endDirections: ['bottom'],
          },

        },
      })
    },
    er() {
      this.graph.addEdge({
        source: 'node1',
        target: 'node2',
        vertices: [
          { x: 100, y: 200 },
          { x: 200, y: 300 },
        ],
        router: {
          name: 'er',
          args: {
            offset: 24,
          },

        },
      })
    },
    smooth() {
      this.graph.addEdge({
        source: 'node1',
        target: 'node2',
        vertices: [
          { x: 100, y: 200 },
          { x: 200, y: 300 },
        ],
        connector: 'smooth',
      })
    },
    rounded() {
      this.graph.addEdge({
        source: 'node1',
        target: 'node2',
        vertices: [
          { x: 100, y: 200 },
          { x: 200, y: 300 },
        ],
        connector: 'rounded',
      })
    },
    jumpover() {
      this.graph.addEdge({
        source: 'node1',
        target: 'node2',
        vertices: [
          { x: 100, y: 200 },
          { x: 200, y: 300 },
        ],
        connector: 'jumpover',
      })
    },
    singleLabel() {
      this.graph.addEdge({
        source: 'node1',
        target: 'node2',
        // 方法一
        labels: [
          {
            attrs: {
              label: { text: '标签1' },
            },
            position: {
              distance: 0.3, // 位置
            },
          },
        ],
        // 方法二
        // labels: ['标签1', '标签2'],
        // 方法三
        // label: 'edge',
      })
    },
    doubleLabel() {
      this.graph.addEdge({
        source: 'node1',
        target: 'node2',
        // 方法一
        labels: [
          {
            attrs: {
              label: { text: '标签1' },
            },
            position: {
              distance: 0.3, // 位置
            },
          },
          {
            attrs: { label: { text: '标签2' } },
          },
        ],
        // 方法二
        // labels: ['标签1', '标签2'],
        // 方法三
        // label: 'edge',
      })
    },
    defaultLabel() {
      this.defaultEdge = this.graph.addEdge({
        source: 'node1',
        target: 'node2',
        label: 'defaultLable',
      })
    },
    // 替换操作奥
    setLabel() {
      this.defaultEdge.setLabels([{
        attrs: {
          label: { text: 'setLabel' },
        },
        position: {
          distance: 0.8, // 位置
        },
      }])
    },
    addLabel() {
      this.defaultEdge.appendLabel({
        attrs: {
          label: { text: 'addLabel' },
        },
        position: {
          distance: 0.8, // 位置
        },
      })
    },
    customPathStyle() {
      this.graph.addEdge({
        source: 'node1',
        target: 'node2',
        attrs: {
          line: {
            stroke: "#7c68fc", // 指定 path 元素的填充色
            sourceMarker: {
              name: 'ellipse', // 椭圆
              rx: 10, // 椭圆箭头的 x 半径
              ry: 6,  // 椭圆箭头的 y 半径
            }, // 实心箭头
            targetMarker: 'block',
          },
        }
      })
    },
    busMap() {
      this.graph.addEdge({
        source: { x: 300, y: 100 },
        target: { x: 1200, y: 100 },
        labels: [
          {
            markup: [
              {
                tagName: "circle",
                selector: "dot"
              },
              {
                tagName: "text",
                selector: "txt"
              }
            ],
            attrs: {
              txt: {
                fill: "#7c68fc",
                textAnchor: "middle",
                textVerticalAnchor: "middle",
                refX: 0,
                refY: 20,
                text: "始发站"
              },
              dot: {
                fill: "#fff",
                stroke: "red",
                strokeWidth: 1,
                r: 5,
                cx: 0,
                cy: 0,
              }
            },
            position: {
              distance: 0, // 位置
            }
          },
          {
            markup: [
              {
                tagName: "circle",
                selector: "dot"
              },
              {
                tagName: "text",
                selector: "txt"
              }
            ],
            attrs: {
              txt: {
                fill: "#7c68fc",
                textAnchor: "middle",
                textVerticalAnchor: "middle",
                refX: 0,
                refY: 20,
                text: "西津桥"
              },
              dot: {
                fill: "#fff",
                stroke: "#000",
                strokeWidth: 1,
                r: 5,
                cx: 0,
                cy: 0,
              }
            },
            position: {
              distance: 0.3, // 位置
            }
          },
          {
            markup: [
              {
                tagName: "circle",
                selector: "dot"
              },
              {
                tagName: "text",
                selector: "txt"
              }
            ],
            attrs: {
              txt: {
                fill: "#7c68fc",
                textAnchor: "middle",
                textVerticalAnchor: "middle",
                refX: 0,
                refY: 20,
                text: "马运路（当前站）"
              },
              dot: {
                fill: "green",
                stroke: "#000",
                strokeWidth: 1,
                r: 5,
                cx: 0,
                cy: 0,
              }
            },
            position: {
              distance: 0.5, // 位置
            },
          },
          {
            markup: [
              {
                tagName: "circle",
                selector: "dot"
              },
              {
                tagName: "text",
                selector: "txt"
              }
            ],
            attrs: {
              txt: {
                fill: "#7c68fc",
                textAnchor: "middle",
                textVerticalAnchor: "middle",
                refX: 0,
                refY: 20,
                text: "终点站"
              },
              dot: {
                fill: "#fff",
                stroke: "red",
                strokeWidth: 1,
                r: 5,
                cx: 0,
                cy: 0,
              }
            },
            position: {
              distance: 1, // 位置
            }
          }
        ],
        attrs: {
          line: {
            stroke: "#7c68fc", // 指定 path 元素的填充色
            targetMarker: ""
          },
        }
      })
    }
  },
  mounted() {
    this.graph = new Graph({
      container: document.querySelector("#container"),
      width: 1300,
      height: 500,
      grid: true,
    });
    this.graph.fromJSON(this.data);
  },
};
</script>
<style scoped>
</style>